<template>
	<view class="content" v-if="pageShow">
		<view class="padding">
			<view class="padding ffffff radius">
				<view class="">
					<view class="nofocusbgc">标题</view>
					<view class="flexleft margin_top">
						<textarea name="" id="" cols="10" rows="10" placeholder-class="placeHolder" placeholder="请输入标题"
							style="height: 140rpx;font-size: 30rpx;" v-model="title"></textarea>
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top">
				<view class="">
					<view class="nofocusbgc">描述</view>
					<view class="flexleft margin_top">
						<textarea name="" id="" cols="10" rows="10" placeholder-class="placeHolder" placeholder="请输入描述"
							style="height: 140rpx;font-size: 30rpx;" v-model="description"></textarea>
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top">
				<view class="flexbetween">
					<view class="nofocusbgc white_nowrap">选择分类</view>
					<view class="flexleft" @click="selectCate">
						<input class="text_g textright margin_right1" type="text" placeholder="请选择分类"
							placeholder-style="color: #999999;font-size: 30rpx;" disabled
							v-model="community_category_name">
						<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top">
				<view class="flexbetween">
					<view class="nofocusbgc">是否收费</view>
					<view class="flexleft">
						<view :class="is_free==1?'select':'noSelect'" style="margin-right: 25rpx;" @click="free(1)">
							免费
						</view>
						<view :class="is_free==0?'select':'noSelect'" @click="free(0)">
							收费
						</view>
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top" v-show="is_free==0">
				<view class="flexbetween">
					<view class="nofocusbgc">收费金额</view>
					<view class="flexleft">
						<input type="text" placeholder="请输入金额" placeholder-style="color: #999999;font-size: 30rpx;"
							style="text-align: right;" v-model="price">
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top" v-show="is_free==0">
				<view class="flexbetween">
					<view class="nofocusbgc">设置免费时长</view>
					<view class="flexleft">
						<input type="number" placeholder="请输入免费时长(秒)"
							placeholder-style="color: #999999;font-size: 30rpx;" style="text-align: right;"
							v-model="free_seconds">
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top" style="margin-bottom: 150rpx;">
				<view class="flexbetween">
					<view class="nofocusbgc">上传视频</view>
					<view class="xiaohong strongtext" v-if="video_link_arr" @click="video_link_arr='';video_link=''">删除视频</view>
				</view>
				<view class="item_imagebox radius margin_top" v-if="video_link_arr">
					<video :src="video_link_arr" v-show="videoShow"></video>
				</view>
				<!-- 图片盒子 -->
				<view class="item_imagebox flexcenter margin_top" @click="uploadImg(1,video_link_arr)" v-if="!video_link_arr">
					<view class="item_image radius">
						<image src="/static/image/home/novideo.png" mode=""></image>
						<!-- <view class="deletimg"></view> -->
					</view>
				</view>
			</view>
			<!-- 固定底部 -->
			<view class="gudingdb ffffff" style="z-index: 999999;">
				<view class="bigbtn" @click="sendVideo">发布</view>
			</view>
		</view>
		<u-picker :show="show" title="选择分类" :columns="cateList" keyName="name" confirmColor="#FF0000" @confirm="confirm"
			@cancel="cancel"></u-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import upFile from "@/utils/upload.js"
	export default {
		data() {
			return {
				images: [],
				title: "", //视频标题
				description: "", //视频描述
				is_free: 1, //是否免费 0收费 1免费
				price: "", //金额
				free_seconds: "", //免费时长
				video_id: "", //视频id
				videoInfo: {}, //视频详情
				video_link: "", //视频链接
				video_link_arr: "", //视频链接
				pageShow: false,
				cateList: [], //视频分类
				community_category_id: "", //分类id
				community_category_name: "", //分类名称
				show: false,
				videoShow: true
			}
		},
		onLoad(options) {
			if (options.id) {
				this.video_id = options.id
				uni.setNavigationBarTitle({
					title: "编辑视频"
				})
			}else{
				this.pageShow = true
			}
			this.getCateList()
		},
		methods: {
			getVideoInfo() { //视频详情
				let _this = this
				httpRequest.request('/api/community/getform', 'GET', {
					id: _this.video_id
				}).then(res => {
					if (res.code == 1) {
						_this.title = res.data.info.title
						_this.description = res.data.info.description
						_this.is_free = res.data.info.is_free
						_this.price = _this.is_free == 0 ? res.data.info.price : ""
						_this.free_seconds = _this.is_free == 0 ? res.data.info.free_seconds : ""
						_this.video_link = res.data.info.video_link
						_this.video_link_arr = res.data.info.video_link_text
						_this.community_category_id = res.data.info.community_category_id
						let index=this.cateList[0].findIndex(item=>{
							return this.community_category_id==item.id
						})
						this.community_category_name=this.cateList[0][index].name
						// let index = this.cateList[0].filter(item => {
						// 	return this.community_category_id == item.id
						// })
						// this.community_category_name = this.cateList[index].name
						// console.log(_this.video_link_arr)
						_this.pageShow = true
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getCateList() { //视频分类
				let _this = this
				httpRequest.request('/api/community/getcategory', 'GET', {}).then(res => {
					if (res.code == 1) {
						this.cateList.push(res.data.category1)
						if (this.video_id) {
							this.getVideoInfo()
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			selectCate() { //选择分类
				this.show = true
				setTimeout(() => {
					this.videoShow = false
				}, 100)
			},
			cancel() {
				this.show = false
				setTimeout(() => {
					this.videoShow = true
				}, 100)
			},
			confirm(e) {
				console.log(e)
				this.community_category_id = e.value[0].id
				this.community_category_name = e.value[0].name
				this.show = false
				setTimeout(() => {
					this.videoShow = true
				}, 100)
			},
			free(type) { //免费或者收费
				this.is_free = type
			},
			sendVideo() { //发布视频
				let _this = this
				if (!_this.title) {
					httpRequest.toast("请输入标题！");
					return false
				}
				if (!_this.description) {
					httpRequest.toast("请输入描述！");
					return false
				}
				if (!_this.community_category_id) {
					httpRequest.toast("请选择分类！");
					return false
				}
				if (!_this.is_free == 0) {
					if (_this.price) {
						httpRequest.toast("请输入金额！");
						return false
					}
					if (_this.free_seconds) {
						httpRequest.toast("请输入免费时长！");
						return false
					}
				}
				if (!_this.video_link) {
					httpRequest.toast("请上传视频！");
					return false
				}
				httpRequest.request('/api/community/publish', 'POST', {
					id: _this.video_id,
					type: 1,
					title: _this.title, //标题
					description: _this.description, //描述
					is_free: _this.is_free, //是否免费:0=收费,1=免费
					price: _this.price, //价格
					free_seconds: _this.free_seconds, //免费时长
					video_link: _this.video_link, //视频链接
					community_category_id: _this.community_category_id, //分类id
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			uploadImg(value, upImgs) {
				let _this = this
				upFile.chooseVideo({

				}, function(res) {
					console.log(res);
					_this.video_link = res.url
					_this.video_link_arr = res.fullurl
					// that.martial_images_arr.push(res.fullurl)
					// that.martial_images.push(res.url)
				})
			},
			deleimage(i, upimg) { //删除图片
				upimg = ""
				this.video_link = ""
			},
		}
	}
</script>

<style lang="scss" scoped>
	// ::v-deep video{
	// 	z-index: 999 !important;
	// }
	::v-deep.u-transition {
		z-index: 9999999 !important;
	}

	.noSelect {
		background: rgba(102, 102, 102, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid rgba(102, 102, 102, .1);
		padding: 20rpx 45rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.select {
		background: rgba(243, 39, 28, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #F3271C;
		padding: 20rpx 45rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
	}

	.placeHolder {
		color: #999999;
		font-size: 30rpx;
	}

	.nofocusbgc {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}
	.item_imagebox{
		position: relative;
		background-color: #f7f7f7;
		width: 100%;
		height: 280rpx;
		video {
			width: 100%;
			height: 100%;
		}
	}
	.item_image {
		width: 180rpx;
		height: 180rpx;

		video {
			width: 100%;
			height: 100%;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>